<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>骨医快线</title>
    <link href="../../../css/mui.plus.css" rel="stylesheet"/>
    <style>
		.center-wrap {
			padding: 40px;
		}
		.abs-center {
			text-align: center;
		}
		.intergral {
			font-size: 24px;
			color: #FF924E;
		}
		.mui-table-view-cell.mui-collapse .mui-collapse-content {
			padding: 0;
		}
		.mui-table-view-cell.mui-collapse .mui-table-view {
		    margin-bottom: 0;
		    margin-top: 0;
		    margin-right: 0;
		    margin-left: -30px;
		}
		.mui-table-view .mui-media-object {
			line-height: 21px;
		}
    </style>
</head>
<body>
	<header class="mui-bar mui-bar-nav oe-pri-bar">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">我的积分</h1>
	</header>
	
	<div class="mui-content">
		<div class="center-wrap">
			<div class="abs-center">
				<span id="intergral" class="intergral">加载中...</span>
				<p>当前积分</p>
				<button id="btnExchange" type="button" class="mui-btn mui-btn-primary">兑换积分</button>
				<p>每月可兑换一次</p>
			</div>
		</div>
		
		<div class="oe-divide-block"></div>
		
		<div class="oe-title-line" style="padding-top: 15px;">
			积分明细
		</div>
		
        <ul class="mui-table-view" id="detail-list">
		    <div class="oe-emp">
		    	<img src="../../../images/blank_page/empty-follow@2x.png"/>
		    </div>
		</ul>
	</div>
	
	<script id="tmp-list" type="text/html">
		{{each data as v i}}
	        <li class="mui-table-view-cell mui-collapse {{i === 0 ? 'mui-active' : ''}}">
	            <a class="mui-navigate-right" href="#">{{v.key}}</a>
	            <div class="mui-collapse-content">
	            	<ul class="mui-table-view">
	                {{each v.data as w j}}
        				<li class="mui-table-view-cell mui-media redirect" data-page="detail.html" 
												  data-or_id="{{w.pd_or_id}}"
												  data-pd_sign="{{w.pd_sign}}"
												  data-pd_amount="{{w.pd_amount}}"
												  data-pd_ctime="{{w.pd_ctime}}">
					        <a href="javascript:;">
					        	<div class="mui-media-object mui-pull-left">
					        		<p>{{w.pd_ctime | slice: 5, 10}}</p>
					        		<p>{{w.pd_ctime | slice: 11, 16}}</p>
					        	</div>
					            <img class="mui-media-object mui-pull-left" src="{{w.pd_img}}">
					            <div class="mui-media-body">
					                {{w.pd_sign === 'plus' ? '+' : '-'}}{{w.pd_amount}}
					                <p class='mui-ellipsis'>{{v.pd_remark}}</p>
					            </div>
					        </a>
					    </li>
	                {{/each}}
	                </ul>
	            </div>
	        </li>
		{{/each}}
	</script>
	
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/app.js"></script>
    <script src="../../../js/lib/template.js"></script>
    <script>
    (function($, a){
    	var html,
    		tmpData = {},
    		drId = a.storage.getUserId(),
    		integralEle = document.getElementById("intergral"),
    		listEle = document.getElementById("detail-list");
    		
    	template.helper('slice', function(str, start, end){
    		return str.slice(start, end);
    	});
    	
    	a.net.get('c_points/show_detail_list', {dr_id: 1}, function(data){
    		if(data && data.code === '100'){
    			tmpData.data = getObjArrayByKey(data.data, 'pd_ctime', filterYearAndMonth);
    			getObjArrayByKey(data.data, 'pd_ctime', filterYearAndMonth);
				html = template('tmp-list', tmpData);
    			listEle.innerHTML = html;
    		}
    	})
    	
    	a.net.get('c_points/show', {dr_id: 1}, function(data){
    		if(data && data.code === '100'){
    			integralEle.innerHTML = data.data.po_amount;
    		}
    	})
    	
    	$('#detail-list').on('tap', '.redirect', function(){
    		$.openWindow({
    			url: this.dataset.page,
    			waiting: {
    				autoShow: false
    			},
    			extras: {
    				data: this.dataset
    			}
    		});
    	})
    	
    	$('.mui-content').on('tap', '#btnExchange', function(){
    		$.openWindow({
    			url: 'exchange.html',
    			waiting: {
    				autoShow: false
    			},
    			extras: {
    				integral: integralEle.innerHTML
    			}
    		});
    	});
    	
    	function filterYearAndMonth(param){
			var key  = param.slice(0, 7);
			return key; 
		}
		
		function getObjArrayByKey(objArr, key, filter){
			var arr  = objArr,
				key  = key,
				map  = {},
				dest = [];
		
			for(var i = 0; i < arr.length; i ++){
				var ai   = arr[i],
					kMap = filter ? filter(ai[key]) : ai[key];
				if(!map[kMap]){
					dest.push({
						key : kMap,
						data: [ai]
					});
					map[kMap] = kMap;
				}else {
					for(var j = 0; j < dest.length; j ++){
						var dj = dest[j];
						if(dj.key === kMap){
							dj.data.push(ai);
							break;
						}
					}
				}
			}
			return dest;
		}
    }(mui, app));
	</script>
</body>
</html>